<template>
  <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6";

export default {
  name: "KMap",
  methods: {
    async initG6() {
      // 实例化 Minimap 插件
      const minimap = new G6.Minimap({
        size: [100, 100],
        className: "minimap",
        type: "delegate",
      });

      // 实例化 Grid 插件
      const grid = new G6.Grid();
      const graph = new G6.Graph({
        container: "mountNode",
        width: 1000,
        height: 600,
        defaultNode: {
          labelCfg: {
            style: {
              fill: "#000",
            },
          },
        },
        defaultEdge: {
          labelCfg: {
            autoRotate: true,
          },
        },
        nodeStateStyles: {
          hover: {
            fill: "lightsteelblue",
          },
          click: {
            stroke: "#000",
            lineWidth: 3,
          },
        },
        edgeStateStyles: {
          click: {
            stroke: "steelblue",
          },
        },
        layout: {
          type: "radial",
          center: [200, 200], // 可选，默认为图的中心
          linkDistance: 500, // 可选，边长
          maxIteration: 1000, // 可选
          focusNode: "node11", // 可选
          unitRadius: 100, // 可选
          preventOverlap: true, // 可选，必须配合 nodeSize
          nodeSize: 30, // 可选
          strictRadial: false, // 可选
          workerEnabled: true, // 可选，开启 web-worker
        },
        modes: {
          default: [
            "drag-node",
            "drag-canvas",
            "zoom-canvas",
            // 点提示框交互工具的配置
            {
              type: "tooltip",
              formatText(model) {
                const text =
                  "label: " + model.label + "<br/> class: " + model.class;
                return text;
              },
              shouldUpdate: (e) => {
                return true;
              },
            },
            // 边提示框交互工具的配置
            {
              type: "edge-tooltip",
              formatText(model) {
                const text =
                  "source: " +
                  model.source +
                  "<br/> target: " +
                  model.target +
                  "<br/> weight: " +
                  model.weight;
                return text;
              },
              shouldUpdate: (e) => {
                return true;
              },
            },
          ],
        },
        plugins: [minimap, grid], // 将 Minimap 和 Grid 插件的实例配置到图上
        fitCenter: true,
      });
      // let res = await this.$http.get("/api/2backcode/edge/findall");
      // res = res.data.data;
      // console.log(res)
      let res = await this.$http.get("api/2backcode/edge/findall");
      res = res.data;
      // console.log(res2)

      // let point = await this.$http.get("/api/2backcode/point/findall");
      // point = point.data;
      // console.log(point)
      let point = await this.$http.get("api/2backcode/point/findall");
      point = point;
      // console.log(point.data)
      // console.log(point2)

      // let edge = await this.$http.get("/api/2backcode/edge/findall");
      // edge = edge.data;
      // console.log(edge)
      let edge = await this.$http.get("api/2backcode/edge/findall");
      edge = edge;
      // console.log(edge2);
      for (let i = 0; i < point.data.length; i++) {
        point.data[i].id = point.data[i].pointId.toString();
        point.data[i].label = point.data[i].pointName;
        point.data[i].class = point.data[i].degree;
      }
      for (let i = 0; i < edge.data.length; i++) {
        edge.data[i].source = edge.data[i].pointId.toString();
        edge.data[i].target = edge.data[i].afterId + "";
        // edge.data[i].target = edge.data[i].afterId.toString();
      }
      // console.log(edge.data)
      for (let i = 0; i < edge.data.length; i++) {
        if (edge.data[i].beforeId == 0) {
          edge.data.splice(i, 1);
          i--;
        } else if (edge.data[i].afterId == -1) {
          edge.data.splice(i, 1);
          i--;
        }
      }
      const data = {
        nodes: point.data,
        edges: edge.data,
      };
      console.log(data);
      const nodes = data.nodes;
      const edges = data.edges;
      nodes.forEach((node) => {
        if (!node.style) {
          node.style = {};
        }
        node.style.lineWidth = 1;
        node.style.stroke = "#666";
        node.style.fill = "steelblue";
        switch (node.class) {
          case 0: {
            node.style.fill = "white";
            break;
          }
          case 1: {
            node.type = "circle";
            node.size = 30;
            node.style.fill = "yellow";
            break;
          }
          case 2: {
            node.type = "rect";
            node.size = [35, 20];
            node.style.fill = "red";
            break;
          }
          case 3: {
            node.type = "ellipse";
            node.size = [35, 20];
            node.style.fill = "pink";
            break;
          }
          case 4: {
            node.style.fill = "purple";
            break;
          }
          case 5: {
            node.style.fill = "green";
            break;
          }
        }
      });
      edges.forEach((edge) => {
        if (!edge.style) {
          edge.style = {};
        }
        edge.style.lineWidth = edge.weight;
        edge.style.opacity = 0.6;
        edge.style.stroke = "grey";
      });

      graph.data(data);
      graph.render();

      graph.on("node:mouseenter", (e) => {
        const nodeItem = e.item;
        graph.setItemState(nodeItem, "hover", true);
      });
      graph.on("node:mouseleave", (e) => {
        const nodeItem = e.item;
        graph.setItemState(nodeItem, "hover", false);
      });
      graph.on("node:click", (e) => {
        // console.log(res)
        console.log(e.item._cfg.model);
        var p = e.item._cfg.model.id;
        var flag = false;
        // console.log(res);
        for (let i = 0; i < res.length; i++) {
          if (res[i].pointId == p && res[i].afterId == -1) {
            console.log(i);
            flag = true;
          }
        }
        var ary = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].pointId == p && res[i].afterId != -1) {
            ary.push(res[i].afterId);
          }
        }
        if (flag) {
          alert(
            e.item._cfg.model.label + e.item._cfg.model.id + "此节点为叶子节点"
          );
          this.go(e.item._cfg.model.id);
        } else {
          alert("子节点编号" + ary);
        }
        const clickNodes = graph.findAllByState("node", "click");
        clickNodes.forEach((cn) => {
          graph.setItemState(cn, "click", false);
        });
        const nodeItem = e.item;
        graph.setItemState(nodeItem, "click", true);
      });
      graph.on("edge:click", (e) => {
        const clickEdges = graph.findAllByState("edge", "click");
        clickEdges.forEach((ce) => {
          graph.setItemState(ce, "click", false);
        });
        const edgeItem = e.item;
        graph.setItemState(edgeItem, "click", true);
      });
    },
    go(value) {
      this.$router.push({ path: "/videoAndPdf", query: { value: value } });
    },
  },
  async mounted() {
    this.initG6();
  },
};
</script>
<style>
/*#mountNode {*/
/*  height: 100%;*/
/*  width: 100%;*/
/*}*/

.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>
